

<ion-content>

    <ion-header>
        <ion-toolbar>
          <ion-title>
            <p style="text-align: center;" >商城</p>
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>

    <div class="content">
        <div class="content-column">
            <ng-container *ngFor="let shop of shopData;let idx=index;" >
                <ion-card *ngIf="idx%2!=0" class="ShopComponent" (click)="goDetail()">
                    <img alt="Silhouette of mountains" src="{{shop.img}}" />
                    <div class="medium-text">
                        <p>{{shop.text}}</p>
                    </div>
                    <div class="medium-bottom">
                        <div class="medium-bottom-left">
                            <span>{{shop.price| toM}}</span>
                        </div>
                        <div class="medium-bottom-right">
                            <span>{{shop.count| toBuy}}</span>
                        </div>
                    </div>
                </ion-card>
            </ng-container>
        </div>

        <div class="content-column">
            <ng-container *ngFor="let shop of shopData;let idx=index;">
                <ion-card *ngIf="idx%2==0" class="ShopComponent" (click)="goDetail()">
                    <img alt="Silhouette of mountains" src="{{shop.img}}" />
                    <div class="medium-text">
                        <p>{{shop.text}}</p>
                    </div>
                    <div class="medium-bottom">
                        <div class="medium-bottom-left">
                            <span>{{shop.price| toM}}</span>
                        </div>
                        <div class="medium-bottom-right">
                            <span>{{shop.count| toBuy}}</span>
                        </div>
                    </div>
                </ion-card>
            </ng-container>
        </div>


    </div>
    <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>